<template>
	<div class="operation-content">
		<el-collapse v-model="activeNames">
			<el-collapse-item :title="items.title" :name="index + 1" v-for="(items, index) in datas" :key="index">
				<div class="compon">
					<div
						draggable="true"
						@dragstart="drag($event)"
						@dragend="dragends($event)"
						:data-name="item.name"
						class="componList cursor-move"
						v-for="(item, ind) in items.comList"
						:key="ind"
					>
						<SvgIcon :name="item.icon" :size="30"></SvgIcon>
						<p>{{ item.text }}</p>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
const activeNames = reactive([1, 2, 3, 4, 5, 6, 7, 8]);
let datas = reactive([
	{
		title: '会员组件',
		comList: [
			{
				name: 'usercard',
				text: '会员卡片',
				icon: 'my-icon icon-huiyuankapian',
			},
			{
				name: 'userorder',
				text: '订单卡片',
				icon: 'my-icon icon-dingdan1',
			},
			{
				name: 'userasset',
				text: '资产卡卷',
				icon: 'my-icon icon-zichankapian',
			},
			{
				name: 'usercoupon',
				text: '卡券卡片',
				icon: 'my-icon icon-qiajuan',
			},
		],
	},
	{
		title: '基础组件',
		comList: [
			{
				name: 'graphicnavigation',
				text: '图文导航',
				type: 'xs',
				icon: 'my-icon icon-tuwendaohang',
			},
			{
				name: 'notice',
				text: '公告',
				icon: 'my-icon icon-gonggao',
			},

			{
				name: 'gridbar',
				text: '宫格导航',
				icon: 'my-icon icon-jiugongge',
			},
		],
	},
	{
		title: '商品组件',
		comList: [
			{
				text: '商品卡片',
				icon: 'my-icon icon-31quanbushangpin',
				name: 'goodsCard',
			},
			// {
			// 	text: '文章模块',
			// 	icon: 'my-icon icon-wenzhang',
			// 	name: 'storenotecard',
			// },
			{
				text: '商品栏',
				icon: 'my-icon icon-shangpinlan',
				name: 'goodsShelves',
			},
		],
	},
	{
		title: '图文组件',
		comList: [
			{
				name: 'carousel',
				text: '轮播图',
				type: 'imageBanner',
				icon: 'my-icon icon-lunboxiaoguo',
			},
			{
				text: '标题文本',
				icon: 'my-icon icon-tuwendaohang',
				name: 'captiontext',
			},

			{
				text: '图片展示',
				type: 'imageBlock',
				icon: 'my-icon icon-danchuangguanggao1',
				name: 'pictureshow',
			},
			{
				text: '视频',
				type: 'videoPlayer',
				icon: 'my-icon icon-shipin',
				name: 'videoss',
			},

			{
				text: '辅助分割',
				icon: 'my-icon icon-fuzhuxian',
				name: 'assistline',
			},

			{
				text: '热区',
				icon: 'my-icon icon-remai',
				name: 'hotzone',
			},
		],
	},
	{
		title: '营销组件',
		comList: [
			// {
			// 	text: '社群涨粉',
			// 	type: '1-14',
			// 	icon: 'my-icon icon-shequn',
			// 	name: 'communitypowder',
			// },
			// {
			// 	text: '关注公众号',
			// 	type: '1-15',
			// 	icon: 'my-icon icon-guanzhugongzhonghao',
			// 	name: 'follow',
			// },
			{
				text: '拼团',
				type: '1-15',
				icon: 'my-icon icon-pintuan',
				name: 'pingtuan',
			},
			{
				text: '秒杀',
				type: '1-15',
				icon: 'my-icon icon-miaosha',
				name: 'follow',
			},
			{
				text: '积分商城',
				type: '1-15',
				icon: 'my-icon icon-jifenshangcheng',
				name: 'follow',
			},
			{
				text: '优惠券',
				type: '1-15',
				icon: 'my-icon icon-youhuijuan',
				name: 'follow',
			},
		],
	},
]);

let props = defineProps({
	pointer: {},
});

/**
 * 当用户开始拖动元素或选择文本时触发此事件
 *
 * @param {Object} event event对象
 */
const drag = (event) => {
	console.log('event: ', event.target.dataset.name);

	/* 开启穿透 */
	props.pointer.show = true;
	/* 传递参数 */
	event.dataTransfer.setData('componentName', event.target.dataset.name);
};

/**
 * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
 *
 * @param {Object} event event对象
 */
const dragends = () => {
	/* 关闭穿透 */
	props.pointer.show = false;
};
</script>

<style lang="scss" scoped>
// :deep(.el-collapse-item__header) {
// 	background-color: var(--next-color-primary-lighter);
// 	padding-left: 10px;
// }
:deep(.el-collapse-item__header) {
	padding: 0 12px;
}
/* 组件 */
.operation-content {
	width: 275px;
	height: 100%;
	// overflow-y: scroll;
	// border-right: 1px solid #ebedf0;
	box-sizing: border-box;
	background: #fff;
	/* 滚动条 */
	&::-webkit-scrollbar {
		width: 1px;
	}
	&::-webkit-scrollbar-thumb {
		background-color: #155bd4;
	}
	:deep(.el-collapse-item__header),
	:deep(.el-collapse-item__wrap) {
		border-bottom: 0 !important;
	}

	/* 组件列表 */
	.componList {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		width: 80px;
		height: 88px;
		margin-bottom: 8px;
		align-items: center;
		cursor: all-scroll;
		transition: all 0.3s;
		&:hover {
			background: #155bd4;
			border-radius: 2px;
			font-weight: 700;
			i,
			p,
			span {
				color: #fff;
			}
		}
		/* 图标 */
		i {
			font-size: 32px;
			width: 32px;
			height: 32px;
			line-height: 32px;
			color: #b0a8a8;
			margin-top: 4px;
		}
		/* 标题 */
		p {
			font-size: 12px;
			color: #323233;
			margin-top: 4px;
		}
		/* 数量 */
		span {
			color: #7d7e80;
			margin-top: 4px;
			font-size: 10px;
		}
	}
}
</style>
